import { ModalForm, ProFormText, ProFormTextArea } from '@ant-design/pro-components';

const ColumnModal: React.FC = ({ modalInfo, operateType, open, onOpenChange, onFinish }) => {
  if (!open) {
    return null;
  }

  return (
    <ModalForm
      layout="horizontal"
      width={480}
      title={`${operateType === 'add' ? '新建' : '修改'}专栏`}
      open={open}
      onOpenChange={onOpenChange}
      modalProps={{
        destroyOnClose: true,
        onCancel: () => onOpenChange(false),
      }}
      onFinish={onFinish}
    >
      <ProFormText
        name="title"
        label="专栏名称"
        initialValue={modalInfo?.title}
        fieldProps={{
          maxLength: 50,
        }}
        rules={[{ required: true, message: '请输入专栏名称' }]}
      />
      <ProFormTextArea
        name="description"
        label="专栏简介"
        initialValue={modalInfo?.description}
        fieldProps={{
          maxLength: 150,
          rows: 4,
        }}
        rules={[{ required: true, message: '请输入专栏简介' }]}
      />
    </ModalForm>
  );
};

export default ColumnModal;
